<!DOCTYPE html >
<html>
<head>
<meta name="Generator" content="TPshop v1.1" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>鸡血海报</title>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<!-- <link rel="stylesheet" href="../../css/footer.css"> -->
<link rel="stylesheet" href="../../css/font_my/iconfont.css">

<style type="text/css">
	body,html{
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		overflow-x: hidden;
		color:#555555;
		background: #eee;
	}
	p{
		margin: 0;
	}
	.poster{
		width: 100%;
		height: 100%;
		/*padding: 0 10px;*/
	}
	.posterZ{
		width: 80%;
		height: calc(100% - 50px);
		margin: auto;
		/*background: #fff;*/
	}
	.posterTop{
		width: 100%;
		height: 50px;
		background: #fff;
		/*border-bottom: 1px solid #ccc;*/
	}
	.posterTZ{
		/*width: 80%;
		margin: auto;
		display: flex;*/
		text-align: center;
		line-height: 50px;
		font-weight: bold;
		font-size: 18px;
	}
	.posterTL,.posterTR{
		width: 50%;
		text-align: center;
		line-height: 45px;
	}
	.fes{
		color: #1963AA;
		border-bottom: 1px solid #1963AA;
	}
	/*励志*/
	.motivationalZ{
		width: 100%;
		height: 100%;
	}
	.motivational{
		width: 100%;
		height: calc(100% - 65px);
		border:1px solid #ccc;
		background: #fff;
		margin-top: 5px;
	}
	.motivationalTop{
		width: 100%;
		height: calc(100% - 90px);
	}
	.motivationalTop img{
		width: 100%;
		height: 100%;
	}
	.motivationalBot{
		width: calc(100% - 20px);
		height: 90px;
		padding: 10px 10px 0 10px;
		display: flex;
	}
	.motivationalBotL{
		width: calc(100% - 70px);
		height: 80px;
	}
	.motivationalBotLT{
		width: 100%;
		height: 40px;
		display: flex;
	}
	.motivationalBotLTL{
		width: 40px;
	}
	.motivationalBotLTL img{
		width: 40px;
		height: 40px;
	}
	.motivationalBotLTR{
		width: calc(100% - 50px);
		padding-left: 10px;
	}
	.motivationalP{
		line-height: 20px;
	}
	.motivationalN{
		font-weight: bold;
	}
	.motivationalBotLB{
		margin-top: 10px;
	}


	.motivationalBotR{
		width: 70px;
	}
	.motivationalBotRImg{
		width: 50px;
		margin: auto;
	}
	.motivationalBotRImg img{
		width: 100%;
	}
	.motivationalP2{
		text-align: center;
		font-size: 10px;
	}
	.motivationalbtn{
		width: 100%;
		display: flex;
		margin-top:15px;
	}
	.motivationalbtn div{
		width: 80px;
		text-align: center;
		height: 30px;
		line-height: 30px;
		border-radius: 15px;
	}
	.motivationalbtnH{
		border:1px solid #4f81d4;
		color:#4f81d4;
		margin-right: calc(100% - 164px)
	}
	.motivationalbtnB{
		background: #4f81d4;
		color: #fff;
	}





	.custom{
		width: 100%;
		height: calc(100% - 60px);
		border:1px solid #ccc;
		background: #fff;
	}
	.motivationalImages{
		width: 100%;
		text-align: center;
		line-height: 50px;
		display: none;
		color: #4f81b4;
	}






</style>

</head>
<body>
	<div class="poster">
		<div class="posterTop">
			<div class="posterTZ">励志
				<!-- <div class="posterTL"><span class="fe fes">励志</span></div> -->
				<!-- <div class="posterTR"><span class="fe1">自定义</span></div> -->
			</div>
		</div>
		<div class="posterZ"></div>
	</div>

<script src='../../js/jquery.js'></script>
<script src="../../js/my/html2canvas.js"></script>
<script type="text/javascript">
		$(".posterZ").load("motivational.html")

	$(".fe").click(function(){
		$(".fe1").removeClass("fes")
		$(".fe").addClass("fes")
		$(".posterZ").load("motivational.html")
	})
	// $(".fe1").click(function(){
	// 	$(".fe").removeClass("fes")
	// 	$(".fe1").addClass("fes")
	// 	$(".posterZ").load("custom.html")

	// })
	// console.log($)

</script>
</body>
</html>